<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>可关闭的tab,子页面用div实现</title>
    <link rel="stylesheet" href="../../bootstrap-5.1.3-dist/css/bootstrap.min.css">
    <script src="../../bootstrap-5.1.3-dist/js/jquery.min.js"></script>
    <script src="../../bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
    <style type="text/css">
      .nav-tabs .nav-link.active {
        color: #008cff;
        border-color: #008cff #008cff #fff
      }
      .nav-tabs li { 
        width:110px;
        box-sizing:border-box;
        border-right:1px solid #dbdbdb;
        background:#f9f9f9;
        position: relative;
      }
      .nav-tabs li a { 
        display:block;
        text-align:center;
      }
      .nav-tabs li b {
        position: absolute;
        width: 20px;
        height: 20px;
        right: 4px;
        top: 12px;
        background-image:url("../svg/close-outline.svg");
        opacity:0.2;
        filter:alpha(opacity=50);
      }
      .nav-tabs li b:hover {
        background-image:url("../svg/close-circle-outline.svg");
        filter: invert(39%) sepia(95%) saturate(3520%) hue-rotate(192deg) brightness(106%) contrast(103%);
        opacity:1;
        filter:alpha(opacity=100);
      }
    </style>
</head>
<body>
    <div class="topbar">
      <ul class="nav nav-tabs">
        <li class="nav-item" id="tab_seed_1">
          <a class="nav-link active" data-bs-toggle="tab" href="#tab_container_1"><sapn>首页</sapn></a></li>
        <li class="nav-item" id="tab_seed_2">
          <a class="nav-link" data-bs-toggle="tab" href="#tab_container_2" >
              次页1
          </a>
          <b tabclose="tab_seed_2" onclick="closableTab.closeTab(this)"></b>
        </li>
        <li class="nav-item" id="tab_seed_3">
          <a class="nav-link" data-bs-toggle="tab" href="#tab_container_3">
              <sapn>次页2</sapn>
          </a>
          <b tabclose="tab_seed_3" onclick="closableTab.closeTab(this)"></b></li>

      </ul>
      <div class="tab-content" style="width:100%;top:80px;">
        <div class="tab-pane fade show active" id="tab_container_1">欢迎页</div>
        <div class="tab-pane fade" id="tab_container_2">欢迎2页</div>
        <div class="tab-pane fade" id="tab_container_3">欢迎3页</div>
      </div>
    </div>
<script type="text/javascript">
  var closableTab = {
    //添加tab
    addTab:function(aid, name, url){

      var id = "tab_seed_" + aid;
      var container ="tab_container_" + aid;

      if(!$('#'+id)[0]){
        var li_tab = '<li class="nav-item" id="'+ id +
        '"><a class="nav-link" data-bs-toggle="tab" href="#' + container + 
        '">'+ name + "</a>"+ 
        '<b  tabclose="'+ id + '" onclick="closableTab.closeTab(this)"></b>';
      
        var tabpanel = '<div class="tab-pane fade" id="'+ container +'">'+
                    '正在加载...' + '</div>';

        $('.nav-tabs').append(li_tab);
        $('.tab-content').append(tabpanel);
        $('#'+container).load(url,function(response,status,xhr){
          if(status=='error'){  // status的值为success和error，如果error则显示一个错误页面
            $(this).html(response);
          }
        });
      }
      // 删除所有tab的active属性
      $('#maintabs a').removeClass("active")
      $('.tab-pane fade').removeClass("show")

      // 激活新的tab，为新建的tab添加active属性
      $("#"+id+' a').tab("show");
    },

    //关闭tab
    closeTab:function(item){
      var val = $(item).attr('tabclose');
      var containerId = "tab_container_"+val.substring(9);
          
      if($('#'+containerId).hasClass('active')){
        $('#'+val).prev().children('a').addClass('active');
        // $('#'+val).prev().find('a').tab('show');
        $('#'+containerId).prev().addClass('active show');
      }


      $("#"+val).remove();
      $("#"+containerId).remove();
    }
  }
</script>
</body>
</html>